<template>
    <div id="home">
        <section style=" margin-bottom: 60px;margin-top:38px;">
            <BannerView></BannerView>

            <!-- 搜索 -->
            <Search></Search>

            <!-- 版块 -->
            <div class="section_block">
                <div><img src="../assets/images/singer.png" alt="">
                    <span>全部歌手</span>
                </div>
                <div>
                    <span>|</span>
                </div>
                <div><img src="../assets/images/Member.png">
                    <span>会员专区</span>
                </div>
            </div>

            <!-- 歌单推荐 -->
            <ul id="list" class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell mui-media" @click="SongSheetRecommend()">
                    <a class="mui-navigate-right">
                        <div class="mui-media-body">歌单推荐</div>
                    </a>
                </li>
            </ul>
            <div class="table" style="border-bottom:5px solid #223748;">
                <div v-for="(v,i) in SongRecommend" :key="i" style="cursor: pointer;" @click="JumpBum(v.specialid)">
                    <a href="javascript:;">
                        <img :src="v.imgurl.replace('{size}','400')">
                        <span v-html="v.specialname"></span>
                        <span v-html="v.username" style="color:#888;"></span>
                    </a>
                </div>
            </div>


            <!-- 新歌推荐 -->
            <ul id="list" class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell mui-media">
                    <a class="mui-navigate-right">
                        <div class="mui-media-body">新歌推荐</div>
                    </a>
                </li>
            </ul>
            <div class="table">
                <div v-for="(v,i) in NewAlbum" :key="i" @click="play(v)" style="cursor: pointer;">
                    <a href="javascript:;">
                        <!-- <img v-view="v.img"> -->
                        <img :src="v.img">
                        <span v-html="v.audio_name" id="ge"></span>
                    </a>
                </div>
            </div>

        </section>
    </div>
</template>
<script>
import BannerView from './BannerView.vue' //轮播图
import Search from './Search.vue' //搜索
export default {
    data() {
        return {
            NewAlbum: '',
            SongRecommend:'',//歌单内容
        }
    },
    components: {
        BannerView,
        Search,
    },
    created() {
        var that = this;
        that.$http({
            url: '/NewAlbum',
            method: 'post'
        }).then((res) => {
            that.NewAlbum = res.data;
            console.log(res.data);
        })
        that.$http({
            url: '/SongRecommend',
            method: 'post'
        }).then((res) => {
            that.SongRecommend = res.data.plist.list.info;
            that.SongRecommend.splice(6,that.SongRecommend.length-1);
            console.log('SongRecommend:',that.SongRecommend);
            console.log(res.data);
        })
    },
    methods: {
        play(v) {
            var that = this;
            var formdata = new FormData();
            formdata.append('hash', v.hash)
            that.$http({
                url: '/SongInfo',
                method: 'post',
                data: formdata,
            }).then((res) => {
                that.songInfo = res.data.data;
                console.log('RankingPage: ', res.data);
                this.$store.dispatch('emitHash', res.data.data)
            })
        },
        JumpBum(specialid){
            console.log(specialid);
            this.$router.push({path:'/newSongSheet',query:{specialid:specialid}});
        },
        SongSheetRecommend(){
            this.$router.push('/SongSheet');
        }
    }
}
</script>
<style scoped>
/* 未知部分 */

.title {
    margin-right: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.detailc {
    font-size: 13px;
    padding: 5px 0;
}


/* 版块部分 */

.section_block {
    display: flex;
    border-bottom: 5px solid #223748;
    padding-bottom: 13px;
}

.section_block>div {
    display: flex;
    align-items: center;
    justify-content: center;
    ;
    flex: 11;
    color: #c0c0c0;
}

.section_block>div:nth-child(2) {
    flex: 1;
    color: #999;
}

.section_block img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}


/* 模块部分 */

.Modular>.title {
    display: flex;
    justify-content: space-between;
}

.Modular>.title>span:nth-child(1) {
    border-left: 2px solid #c0c0c0;
}

.Modular>.title>span {
    margin-left: 10px;
    font-size: 13px;
}


/* 模块部分 */

#list,
#list li,
#list li a,
.mui-table-view:before,
.mui-table-view-cell:after,
.mui-table-view:after {
    background-color: transparent;
    border: 0px;
}

.table {
    display: flex;
    flex-wrap: wrap;
    margin: 0px 5px;
    /* width: 120%; */
}

.table div {
    width: 30%;
    margin: 0px 1.5% 6px;
}

.table div a {
    display: flex;
    flex-direction: column;
}

.table div img {
    width: 100%;
    margin-bottom: 5px;
}

.table div span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  color: #c5c5c5;
  padding: 0 8px 0px 0px;
}
.table div span#ge{
  -webkit-line-clamp: 2;
}
</style>
